<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>损坏卡写卡</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
    <style type="text/css">
        .layui-table-cell{height:40px;line-height:40px;}
    </style>
</head>
<body >
<div class="layui-row">
    <input type="hidden" class="input-text" id="id" name="id">
    <div class="layui-col-md4" style="margin-left: 30px;">
        <div>数据库</div>
        <div class="layui-form-mid layui-word-aux" style="color: red!important;margin-left: 30px;">请将工卡放入卡座，如未识别工卡，请重新放入</div>
        <div class="layui-form-item">
            <label class="layui-form-label">卡号</label>
            <div class="layui-input-inline" >
                <input type="text" id="cardNo" name="cardNo" readonly autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">会员照片</label>
            <div class="layui-input-block">
                <img class="layui-upload-img" name="picture" id="picture" style="width: 200px;height: 150px">
                <p id="demoText"></p>
            </div>
            <input type="hidden" class="input-text" id="logo" name="logo">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">会员编号</label>
            <div class="layui-input-block">
                <input type="text" name="bh" id="bh"  placeholder="请输入会员编号" autocomplete="off" readonly class="layui-input">
            </div>
            <!--<div class="layui-form-mid layui-word-aux">辅助文字</div>-->
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">会员姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" id="name"   placeholder="请输入姓名" autocomplete="off" readonly class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">到期时间</label>
            <div class="layui-input-inline">
                <input type="text" name="dqtime" id="dqtime" disabled id="end_time" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-col-md4 layui-col-md-offset3" style="margin-top: 5px;">
        <div>卡内信息</div>
        <div class="layui-form-item">
            <label class="layui-form-label">卡号</label>
            <div class="layui-input-inline" >
                <input type="text" id="cardNo2" name="cardNo" readonly autocomplete="off" class="layui-input" />
            </div>
            <div class="layui-form-mid layui-word-aux" id="msg" style="color: red!important;margin-left: 30px;"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">会员照片</label>
            <div class="layui-input-block">
                <img class="layui-upload-img" name="picture" id="picture2" style="width: 200px;height: 150px">
                <p id="demoText2"></p>
            </div>
            <input type="hidden" class="input-text" id="logo2" name="logo">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">会员编号</label>
            <div class="layui-input-block">
                <input type="text" name="bh" id="bh2" required lay-verify="required" placeholder="请输入会员编号" autocomplete="off" readonly class="layui-input">
            </div>
            <!--<div class="layui-form-mid layui-word-aux">辅助文字</div>-->
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">会员姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" id="name2" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" readonly class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">到期时间</label>
            <div class="layui-input-inline">
                <input type="text" name="dqtime" disabled id="end_time2" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
</div>
<div class="layui-row" style="width:100%;">
    <div class="layui-form-item" style="margin:20px auto;">
        <div class="layui-input-block" style="margin: 0 auto;width:400px;">
            <button class="layui-btn" id="addWuye" lay-submit lay-filter="write">重新写卡</button>
            <button class="layui-btn layui-btn-warm" id="clearCard" lay-submit lay-filter="clearCard">擦除卡</button>
            <button type="reset" id="reset" lay-submit lay-filter="reset" class="layui-btn layui-btn-primary">重新读卡</button>
        </div>
    </div>
</div>
<!--<blockquote class="layui-elem-quote quoteBox mod_default_box">-->
<!--    <form class="layui-form">-->
<!--        <div class="layui-inline">-->
<!--            <label class="layui-form-label">关键字</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <input type="text" id="name1" name="name" placeholder="编号、姓名、联系方式" autocomplete="off" class="layui-input" />-->
<!--            </div>-->
<!--            <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="search-qiye-submit">-->
<!--                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>-->
<!--            </button>-->
<!--        </div>-->

<!--        <div class="layui-inline">-->
<!--            <label class="layui-form-label">物业</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <select name="city" lay-verify="" lay-filter="wuye" id="wuye" lay-search>-->
<!--                    <option value="">选择物业</option>-->
<!--                </select>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="layui-inline">-->
<!--            <label class="layui-form-label">企业</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <select name="city" lay-verify="" lay-filter="qiye" id="qiye1" lay-search>-->
<!--                    <option value="">选择企业</option>-->
<!--                </select>-->
<!--            </div>-->
<!--        </div>-->

<!--        <div class="layui-inline">-->
<!--            <label class="layui-form-label">职业</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <select name="city" lay-verify="" lay-filter="zhiye" id="zhiye" lay-search>-->
<!--                    <option value="">选择职业</option>-->
<!--                </select>-->
<!--            </div>-->
<!--        </div>-->
<!--    </form>-->
<!--</blockquote>-->
<!--<div style="display: none" id="batchAdd"></div>-->
<!--&lt;!&ndash;数据列表&ndash;&gt;-->
<!--<div style="width:90%;margin:0 auto;">-->
<!--    <table class="layui-hide" id="test" lay-filter="qiye-table"></table>-->
<!--</div>-->
<!--<script type="text/html" id="qiye-toolbar">-->
<!--&lt;!&ndash;    <div class="layui-container" style="margin-left:0px;">&ndash;&gt;-->
<!--        <a class="layui-btn layui-btn-xs" lay-event="batchAdd">绑定此卡</a>-->
<!--&lt;!&ndash;    </div>&ndash;&gt;-->
<!--</script>-->
<script src="../../js/layui/layui.js"></script>
<script src="../../js/layui/layui.all.js"></script>
<script src="../../js/config.js"></script>
<script src="../../js/token.js"></script>
<script src="./js/lock.js"></script>
<script src="./js/smartReader.js"></script>
<script src="./js/card_test.js"></script>

<script>

    var $ = undefined
    var layer = undefined
    var form = undefined

    layui.use(['table'], function() {
        $ = layui.$;
        var table = layui.table;
        layer = layui.layer;
        form = layui.form;

        var name = ""

        table.render({
            elem: '#test'
            , id: 'staff-table-id'//重载需要
            , url: HOST+'userInfo/userInfoList'
            , title: '损坏卡补卡'
            ,toolbar: '#toolbarDemo'
            , cols: [[
                {type: 'numbers'}
                , {field: 'bh',align : 'center', title: '会员编号', width:110}
                , {field: 'name1', width: 110, align: 'center', title: '姓名'}
                , {field: 'cardNo', width: 110, align: 'center', title: '卡号'}
                ,{field:'sex',width : 110,align : 'center', title: '性别',templet: function (d) {
                        if (d.sex==0) return "女";
                        else if (d.sex==1) return "男";
                    }
                }
                , {field: 'phone',align : 'center',title: '联系方式' , width:140}
                , {field: 'address',align : 'center',title: '家庭住址', width:140}
                /*, {field: 'sfz',align : 'center', title: '证件号码', width:180}*/
                , {field: 'dqtime',align : 'center', title: '到期时间', width:180}
                , {field: 'picture',align : 'center',title: '头像',width : 125,templet:function(d){
                        if (d.picture==null || d.picture==""){
                            return "";
                        }else{
                            return "<div><img src=\""+HOST+"upload/"+d.picture+"\" style=\"width: 70px;height: 50px;\" onclick=\"previewImgs(this)\"></div>";
                        }
                    }
                }
                // , {field: 'jfstatus', width: 110, align: 'center', width:110, title: '缴费状态', templet: function (d) {
                //         if (d.jfstatus == 0) return "正常";
                //         else if (d.jfstatus == 1) return "快到期";
                //         else if (d.jfstatus == 2) return "已到期";
                //     }
                // }
                , {toolbar: "#qiye-toolbar",align : 'center', width: 250, title: "操作" , fixed:"right"}
            ]]
            , page: true
            ,
            // page: {
            //     curr: layui.data("gp_staff_page").index
            // },
            done: (res, curr, count) => {
                layui.data("shkbk_page", {
                    key: 'index',
                    value: curr
                });
            }
        });
        window.setTimeout(function(){
            // 在移动端去掉表格右侧的固定内容
            let bodywidth = $("body").width();
            if(bodywidth<1000){
                $(".layui-table-fixed").empty();
            }
        },100)

        //搜索操作
        form.on('submit(search-qiye-submit)', function (data) {
            name = data.field.name
            table.reload('staff-table-id', {
                where: {"name": name}
                , page: {
                    curr: 1
                }
            });
            return false;
        });

        form.on("submit(write)" , function(){
            if(canWrite) {
                write()
            }
            return false ;
        })

        form.on("submit(clearCard)" , function(){
            clearCard();
            return false ;
        })

        form.on("submit(reset)" , function(){
            location.reload()
            return false ;
        })
    });

    function select_file(){

        var fd = new FormData();
        fd.append("file", $("#file")[0].files[0]);
        $.ajax({
            url: HOST+"upload_bg",
            type: "POST",
            processData: false,
            contentType: false,
            data: fd,
            success: function(d) {
                console.log(d);
            }
        });
    }
</script>

<script>
    function previewImgs(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='800px' height='500px'/>";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [800 + 'px', 550 + 'px'],  // area: [width + 'px',height+'px']  //原图显示
            shadeClose: true,
            scrollbar: false,
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }
</script>
</body>
</html>